<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <input type="text" placeholder="请输入学院班级姓名">
        <input type="submit" id="btn">
    </form>
    <table border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>行号</td>
            <td>班级</td>
            <td>学生</td>
            <td>试卷名称</td>
            <td>交卷时间</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>21</td>
            <td>1807班</td>
            <td>贾方赫</td>
            <td>js下</td>
            <td>2019-3-11</td>
            <td><button>删除</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>22</td>
            <td>1807班</td>
            <td>姜久铭</td>
            <td>js下</td>
            <td>2019-3-11</td>
            <td><button>删除</button></td>
        </tr>
    </table>
    <script src="../jQuery库/jquery-3.1.0.min.js"></script>

    <script>
        let $btn = $("#btn");
        let $text = $("form>input[type=text]");
        let num = 22;
        $btn.on("click", function() {
            let textVal = $text.val();
            let str1 = textVal.substr(0, 4);
            let str2 = textVal.slice(4);
            let date = new Date();
            let dateStr = date.toLocaleDateString().replace(/\//g, "-");
            // let year = date.getFullYear();
            // let mon = date.getMonth() + 1;
            // let day = date.getDate();

            if (!textVal.length) {
                alert("请填入正确的内容");
                return;
            }
            $("table").append(`<tr>
                <td><input type="checkbox"></td>
                <td>${++num}</td>
                <td>${str1}班</td>
                <td>${str2}</td>
                <td>js下</td>
                <td>${dateStr}</td>
                <td><button>删除</button></td>
            </tr>`)
        })

        $("table").on("click", "button", function() {
            let $this = $(this);
            let pc = $this.parent().siblings().children("input").prop("checked");

            if (pc) {
                if (confirm("确定删除吗？")) {
                    $this.parent().parent().remove()
                }
            } else {
                alert("请选择删除的内容！")
            }

        })
    </script>




















    <!-- <script>
        let num = 22;
        $("#btn").click(function() {
            let val = $("[type=text]").val();
            let cname = val.substr(0, 4);
            let pname = val.substr(4);
            let date = new Date();
            // console.log(date.toLocaleDateString().replace(/\//g, '-'))
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let dateStr = `${year}-${month}-${day}`;

            if (val.length <= 4) {
                alert("请输入姓名")
                return;
            }

            $("tbody").append(` <tr>
            <td><input type="checkbox"></td>
            <td>${++num}</td>
            <td>${cname}班</td>
            <td>${pname}</td>
            <td>js下</td>
            <td>${dateStr}</td>
            <td><button>删除</button></td>
        </tr>`)
        })

        $("table").on("click", "button", function() {
            console.log($(this).parent().siblings().find("[type=checkbox]"))
            if ($(this).parent().siblings().find("[type=checkbox]").prop("checked")) {
                if (confirm("确定删除吗？")) {
                    $(this).parent().parent().remove()
                }
            } else {
                alert("请选择您要删除的学生")
            }

        })
    </script> -->
</body>

</html>